<!-- 搜索条件 -->
<template>
  <el-card class="mb10">
    <Bu-form v-bind="searchFormConfig" ref="BuFormRef" v-model="formData">
      <!--            <template #header>-->
      <!--                <div class="header">-->
      <!--                    <h1>高级检索</h1>-->
      <!--                </div>-->
      <!--            </template>-->
      <template #search>
        <div class="search">
          <el-button
            type="primary"
            icon="Search"
            class="mr10"
            @click="searchClick"
            >查询</el-button
          >
          <el-button type="primary" icon="Refresh" @click="resetClick"
            >重置</el-button
          >
        </div>
      </template>
      <!--            <template #footer>-->
      <!--                <div class="footer">-->
      <!--                    <el-button type="primary" @click="resetClick">重置</el-button>-->
      <!--                    <el-button type="primary" @click="searchClick">搜索</el-button>-->
      <!--                </div>-->
      <!--            </template>-->
    </Bu-form>
  </el-card>
</template>

<script setup name="SearchForm">
import BuForm from '@/components/Form/index.vue'
import { computed } from 'vue'
// 定义属性
const props = defineProps({
  searchFormConfig: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(['resetBtnClick', 'searchBtnClick'])

const BuFormRef = ref(null)

// 1.从接收到的搜索配置中取出各个field,组成表单的数据formData
const formItems = props.searchFormConfig?.formItems ?? []
let formDataInit = {}
formItems.map((item) => {
  formDataInit[item.field] = item.default || ''
})

let formData = ref(formDataInit)
// 2.重置与搜索功能
// 重置按钮触发
const resetClick = () => {
  BuFormRef.value?.resetForm()
  emit('resetBtnClick')
}
// 搜索按钮触发
const searchClick = () => {
  // 这里需要遍历搜索配置项，配置项里可以传dataType，要求数据返回什么类型的数据
  let queryInfo = { ...formData.value }
  props.searchFormConfig.formItems.map((item) => {
    if (item.dataType === 'number' && queryInfo[item.field] !== '') {
      queryInfo[item.field] = Number(queryInfo[item.field])
    }
  })
  // 清空queryInfo中没有值的属性
  for (const i in queryInfo) {
    if (queryInfo[i] === '' || queryInfo[i].length === 0) {
      delete queryInfo[i]
    }
  }
  emit('searchBtnClick', queryInfo)
}
defineExpose({
  BuFormRef,
})
</script>

<style scoped lang="scss">
.header {
  padding-top: 20px;
}
.footer {
  text-align: right;
  padding: 0 50px 20px 0;
}
.search {
  margin-left: auto;
  padding-right: 10px;
}
.page-search {
  margin: 0 -10px -20px;
}
</style>
